// 导入创建路由相关依赖
import { createBrowserRouter,createHashRouter } from "react-router-dom";

import Base from "../views/01.React-Base";
import Template from "../views/01.React-Base/01_React_模版语法";
import List from "../views/01.React-Base/02_React_列表渲染";
import Condition from "../views/01.React-Base/03_React_条件渲染";
import Event from "../views/01.React-Base/04_React_事件绑定";
import Module from "../views/01.React-Base/05_React_组件创建";
import UseStateData from "../views/01.React-Base/06_React_useState函数";
import Styles from "../views/01.React-Base/07_React_样式处理";
import UseBinding from "../views/01.React-Base/08_React_双向绑定";
import Dom from "../views/01.React-Base/09_React_DOM元素";
import FathertoSon from "../views/01.React-Base/10_React_组件通信/10.1_组件通信_父传子";
import SontoFather from "../views/01.React-Base/10_React_组件通信/10.2_组件通信_子传父";
import Brother from "../views/01.React-Base/10_React_组件通信/10.3_组件通信_兄弟通信";
import Storeys from "../views/01.React-Base/10_React_组件通信/10.4_组件通信_跨层通信";
import UseEffectWatch from "../views/01.React-Base/11_React_useEffect函数/11.1_useEffect组件监听";
import UseEffectParam from "../views/01.React-Base/11_React_useEffect函数/11.2_useEffect依赖项参数";
import UseEffectBy from "../views/01.React-Base/11_React_useEffect函数/11.3_useEffect清除副作用";
import CustomizeHook from "../views/01.React-Base/12_React_自定义Hook函数";

import Redux from "../views/02.React-Redux";

import NotFound from "../views/03.React-Router/06_Router_404路由配置/NotFound";

/**
 * 配置路由模式：
 * 【说明】：路由模式分为 history模式及hash模式
 *          history模式：通过 createBrowserRouter 配置路由表 （http://localhost:3000/Event）
 *          hash模式：通过 createHashRouter 配置表路由（ http://localhost:3000/#/Event ）
 */ 


// 创建路由实例并配置路由
let router = createHashRouter([
  {
    path: "/login", // 跳转路径
    element: <div>登录</div>, // 跳转页面，可以标签，函数等
    children: [  // 二级路由
      { index: true, element: <div>首页</div> }, // 设置路由重定向
      { path: "my", element: <div>我的</div> },
    ]
  },

  {
    path: "/",
    element: <Base />,
    name: "React-基础",
    children: [
      { index: true, element: <Template />, name: "模版语法" },
      { path: "/List", element: <List />, name: "列表渲染" },
      { path: "/Condition", element: <Condition />, name: "条件渲染" },
      { path: "/Event", element: <Event />, name: "事件绑定" },
      { path: "/Module", element: <Module />, name: "组件创建" },
      { path: "/usestate", element: <UseStateData />, name: "useState()函数" },
      { path: "/Styles", element: <Styles />, name: "样式处理" },
      { path: "/UseBinding", element: <UseBinding />, name: "样式处理" },
      { path: "/Dom", element: <Dom />, name: "获取DOM元素" },
      { path: "/FathertoSon", element: <FathertoSon />, name: "组件通信-父传子", },
      { path: "/SontoFather", element: <SontoFather />, name: "组件通信-子传父", },
      { path: "/Brother", element: <Brother />, name: "组件通信-兄弟通信", },
      { path: "/Storeys", element: <Storeys />, name: "组件通信-跨层通信", },
      { path: "/useEffectWatch", element: <UseEffectWatch />, name: "useEffect-组件监听", },
      { path: "/useEffectParam", element: <UseEffectParam />, name: "useEffect-依赖项参数", },
      { path: "/useEffectBy", element: <UseEffectBy />, name: "useEffect-清除副作用", },
      { path: "/CustomizeHook", element: <CustomizeHook />, name: "自定义Hook函数", },

    ],
  },
  {
    path: "/redux",
    element: <Redux />,
    name: "React-Redux 状态管理",
  },

  { path: "*", element: <NotFound />  }, // 配置 404

]);

// 导出路由对象
export default router;
